<template>
  <v-toolbar
    class="header-toolbar"
    fixed
    app
    dark
    :clipped-left="$vuetify.breakpoint.lgAndUp"
  >
    <v-toolbar-title class="header-toolbar-title" @click="backHome">
      <h3>
        <i
          ><img src="../../img/header-logo.png" :alt="$t('general.SystemName')"
        /></i>
        <span>{{ $t("general.SystemName") }}</span>
      </h3>
    </v-toolbar-title>
    <v-spacer></v-spacer>

    <el-autocomplete
      class="inline-input"
      v-model="searchText"
      :fetch-suggestions="querySearchAsync"
      :placeholder="$t('search.Input')"
      :trigger-on-focus="false"
      @select="handleSelect"
      @keyup.enter.native="search(searchText)"
    >
      <i
        data-count="searchCompanyBtn"
        class="el-icon-search el-input__icon header-search-btn"
        slot="suffix"
        @click="handleSelect"
      >
      </i>
    </el-autocomplete>

    <el-dropdown
      v-if="realName !== ''"
      trigger="click"
      @command="handleCommand"
      placement="bottom-start"
      @visible-change="handleChange"
      style="width:120px;margin-right:89px"
    >
      <span class="el-dropdown-link" :class="{ link2: !isDropDown }">
        <i class="user-logo"></i>{{ realName }}
        <i v-show="!isDropDown" class="el-icon-arrow-down el-icon--right"></i>
        <i v-show="isDropDown" class="el-icon-arrow-up el-icon--right"></i>
      </span>
      <el-dropdown-menu
        slot="dropdown"
        style="width:100px;padding-bottom:0;text-align:center;"
      >
        <el-dropdown-item command="a">{{
          $t("account.Favorites")
        }}</el-dropdown-item>
        <el-dropdown-item command="b">{{
          $t("account.History")
        }}</el-dropdown-item>
        <el-dropdown-item command="c">账号管理</el-dropdown-item>
        <el-dropdown-item command="d">{{
          $t("account.Logout")
        }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- <vChangeLang2/> -->
    <!-- 我的收藏 -->
    <v-dialog v-model="dialogVisible" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ $t("account.Favorites") }}</span>
        </v-card-title>
        <v-card-text style="padding-bottom: 0">
          <v-container grid-list-md>
            <!-- <Collect :dialogVisible="dialogVisible"/> -->
          </v-container>
        </v-card-text>
      </v-card>
    </v-dialog>
    <!-- 浏览历史 -->
    <v-dialog v-model="dialogHistory" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ $t("account.History") }}</span>
        </v-card-title>
        <v-card-text style="padding:0 16px">
          <v-container grid-list-md style="padding:0 24px 24px">
            <!-- <BrowsingHistory :dialogHistory="dialogHistory"/> -->
          </v-container>
        </v-card-text>
      </v-card>
    </v-dialog>
    <!-- 账号管理 -->
    <!-- <AccManagement ref="accManagement"/> -->
    <!-- <v-dialog max-width="400px">
      <AccManagement ref="accManagement"/>
    </v-dialog> -->
  </v-toolbar>
</template>

<script>
import axios from "axios";
// import vChangeLang2 from '@/components/common/vChangeLang2'
// import vPagination from '@/components/common/vPagination'
// import AccManagement from '@/modules/account/AccManagement'
// import Collect from '@/components/Collect'
// import BrowsingHistory from '@/components/BrowsingHistory'
export default {
  inject: ["reload"],
  components: {
    // vChangeLang2,
    // vPagination,
    // AccManagement,
    // Collect,
    // BrowsingHistory
  },
  data: () => ({
    searchText: "",
    realName: this.$cookie.get("realName") || "",
    total: 0,
    currentPage: 1,
    tableCollect: [],
    tableHistory: [],
    dialogPercent: false,
    percent: 0,
    dialogVisible: false,
    dialogHistory: false,
    pageSize: 10,
    dialog2: true,
    cancel2: null,
    isDropDown: false, // 展开下拉列表taggle
  }),
  methods: {
    // 返回首页
    backHome() {
      this.$router.push({
        name: "searchEntrance",
      });
    },
    // 查询补全
    querySearchAsync(queryString, cb) {
      if (this.cancel2 !== null) {
        this.cancel2();
      }
      if (this.searchText === "") {
        cb([]);
        return;
      }
      let ths = this;
      this.querySearchList = [];
      this.$get(
        this.$Url.comparison.autoComplete,
        {
          keyWord: queryString || this.searchText,
        },
        new axios.CancelToken(function executor(c) {
          ths.cancel2 = c;
        })
      ).then((res) => {
        let list = res.data ? res.data.result : [];
        list.forEach((v) => {
          this.querySearchList.push({ value: v._source.name });
        });
        cb(this.querySearchList);
      });
    },
    handleSelect() {
      if (this.searchText !== "") {
        this.search(this.searchText);
        this.reload();
      }
    },
    // 搜索公司名称
    search(searchText) {
      if (searchText === "") {
        return;
      }
      this.$router.push({
        name: "searchList",
        query: {
          companyName: this.searchText,
        },
      });
    },
    // 用户功能
    handleCommand(command) {
      if (command === "a") {
        this.dialogVisible = true;
      } else if (command === "b") {
        this.dialogHistory = true;
      } else if (command === "c") {
        this.$refs.accManagement.init();
      } else if (command === "d") {
        // 注销
        this.$confirm("确认退出当前用户？", "退出登录", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$post(this.$Url.account.loginOut, {
            username: this.$cookie.get("userName"),
            token: this.$cookie.get("token"),
          })
            .then((res) => {
              if (res.status === 200) {
                this.$cookie.remove("token");
                this.$cookie.remove("companyName");
                this.$cookie.remove("identity");
                this.$cookie.remove("autoLogin");
                this.$cookie.remove("realName");
                this.$cookie.remove("userName");
                this.$router.push({
                  name: "index",
                });
              }
            })
            .catch((e) => {
              console.log(e);
            });
        });
      }
    },
    closeInterval() {
      this.dialogPercent = false;
      clearInterval(typesH);
      typesH = null;
      this.dialogPercent = false;
    },
    handleChange(v) {
      this.isDropDown = v;
    },
  },
};
</script>

<style scoped>
.header-toolbar {
  color: #fff;
  background-color: #0b0a2b;
}
.header-toolbar-title {
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
.header-toolbar-title h3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}
.header-toolbar-title h3 i {
  display: inline-block;
  height: 30px;
  padding: 0 10px;
}
.header-toolbar-title h3 i img {
  display: block;
  height: 26px;
  padding-top: 2px;
}
.header-toolbar-title h3 span {
  position: relative;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
.header-toolbar-title h3 span:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 14px;
  margin-top: -7px;
  content: "";
  background-color: #fff;
}
.inline-input {
  width: 20%;
  min-width: 200px;
  margin-right: 10px;
}
.header-search-btn {
  font-size: 20px;
  cursor: pointer;
}
.el-dropdown-link {
  padding-left: 40px;
  color: #fff;
  outline: 0;
}
.user-logo {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  width: 40px;
  height: 32px;
  margin-top: -16px;
  font-style: normal;
  background: url(../../img/user-logo.png) no-repeat center center;
  background-size: auto 26px;
}
.link2 {
  color: #7674a3 !important;
}
.link2 .user-logo {
  background-image: url(../../img/user-logo2.png);
}
.el-dropdown-menu {
  padding-top: 0;
}
.collect {
  display: inline-block;
  cursor: pointer;
}
.history {
  display: inline-block;
  cursor: pointer;
}
.separator {
  display: inline-block;
  width: 10px;
  text-align: center;
  font-style: normal;
  color: #fff;
}
.name_link:hover {
  text-decoration: underline;
  color: #0000ee;
  cursor: pointer;
}
</style>
